<!--入库验收详情-电子秤入库详情-->
<template>
  <div>
    <cus-modal ref="modal" :title="`查看详情-${productName}`" :width="1300">
      <Table
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
      >
      <template slot-scope="{ row }" slot="imgOperation">
          <div style="display: flex; justify-content: center">
            <div style="height: 40px; width: 80px">
              <viewer ref="viewer">
               
                  <img :src="row.image" style="width: 100%; height: 100%" />
                
              </viewer>
            </div>
          </div>
        </template>

        <!-- <template slot-scope="{ row }" slot="imgOperation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-if="row.image"
              style="color:#1E6FFF;padding: 0 5px"
              @onClick="onShow(row)"
            >
              <Icon type="ios-search" size="4" style="margin: 2px 3px 0 0" />
              <span>查看</span>
            </cus-button>
          </div>
        </template> -->
      </Table>
      <div slot="footer">
        <slot name="footer">
          <div class="modal-footer">
          </div>
        </slot>
      </div>
    </cus-modal>
    <!--查看图片-->
    <Modal
      v-model="showModal"
      width="500"
      title="查看图片"
      footer-hide
    >
     <div style="height:400px">
        <img :src="picture" v-if="picture" alt="" style="height:100%;width:100%;">
        <div v-else style="text-align:center;">暂无图片</div>
     </div>
    </Modal>
  </div>
</template>

<script>
const columns = [ //手工入库使用表头
  {
    title: "序号",
    type: "index",
    minWidth: 70,
    align: "center",
  },
  {
    title: "数量",
    key: "qty",
    minWidth: 75,
    align: "center",
  },
  {
    title: "重量",
    key: "weight",
    minWidth: 75,
    align: "center",
  },
  {
    title: "计量单位",
    key: "unit",
    minWidth: 100,
    align: "center",
  },
  {
    title: "去皮",
    key: "deductWeight",
    minWidth: 75,
    align: "center",
  },
  {
    title: "扣重",
    key: "punishWeight",
    minWidth: 75,
    align: "center",
  },
  {
    title: "单价(元)",
    key: "price",
    minWidth: 90,
    align: "center",
  },
  {
    title: "金额(元)",
    key: "amount",
    minWidth: 90,
    align: "center",
  },
  {
    title: "备注",
    key: "remark",
    minWidth: 155,
    align: "center",
  },
  {
    title: "设备编号",
    key: "deviceNo",
    minWidth: 100,
    align: "center",
  },
  {
    title: "验收时间",
    key: "createTime",
    minWidth: 175,
    align: "center",
  },
  {
    title: "入库照片",
    slot: "imgOperation",
    minWidth: 135,
    align: "center",
  },
];
const columnsB = [ //成品入库使用表头
  {
    title: "序号",
    type: "index",
    minWidth: 70,
    align: "center",
  },
  {
    title: "数量",
    key: "qty",
    minWidth: 75,
    align: "center",
  },
  {
    title: "重量",
    key: "weight",
    minWidth: 75,
    align: "center",
  },
  {
    title: "单位",
    key: "unit",
    minWidth: 75,
    align: "center",
  },
  {
    title: "去皮",
    key: "deductWeight",
    minWidth: 75,
    align: "center",
  },
  {
    title: "扣重",
    key: "punishWeight",
    minWidth: 75,
    align: "center",
  },
  {
    title: "价格",
    key: "price",
    minWidth: 75,
    align: "center",
  },
  {
    title: "金额",
    key: "amount",
    minWidth: 75,
    align: "center",
  },
  {
    title: "备注",
    key: "remark",
    minWidth: 175,
    align: "center",
  },
  {
    title: "验收时间",
    key: "createTime",
    minWidth: 175,
    align: "center",
  },{
    title: "操作",
    slot: "operation",
    minWidth: 135,
    fixed: "right",
    align: "center",
  },
];
export default {
  components: {},
  data() {
    return {
      loading: false,
      columns,            // 手工入库表头
      columnsB,           // 成品入库使用表头
      data: [],           // 表数据
      showModal: false,   // 查看图片弹框
      picture:"",         // 图片地址
      productName:"",     // 物资名称
      isEdit: false,      // true 代表入库进入入库验收详情, false代表成品入库
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  computed: {
    images(img = '') {
      return  [img]
    }
  },
  props: {},
  mounted() {},
  methods: {
    show() {
      this.loading = false;
      this.$refs["modal"].show = true;
    },
    // onShow(row) {
    //   this.picture = row.image;
    //   this.showModal = true;
    // },
    
    onCancel() {
      this.$refs["modal"].show = false;
    },
  },
  watch: {}
};
</script>

<style lang="less" scoped>
</style>
